<template>
    <button @click="add">添加项目</button>
    <button @click="dec" :disabled="lists.length == 0">删除项目</button>
    <transition-group name="list" tag="ul" class="list">
        <li v-for="(item, index) in lists" :key="item" class="listItem">
            {{ item }} (索引值:{{ index }})</li>
    </transition-group>
</template>

<script setup>
import { ref } from 'vue';


const lists = ref(["项目1", "项目2", "项目3"])
let count = 3//计数器

//添加项目
function add() {
    if (lists.value.length ===0){
  
    }
    count++;
     lists.value.push(`项目${count}`)
 
}
function dec() {
  
    if(lists.value.length>0){
  lists.value.shift()
    }
    
  
}

</script>
<style>
.list {
    list-style: none;
}

.listItem {
    background-color: whitesmoke;
    border: 2px solid #ddd;
    margin-top: 20px;
    margin-left: -39px;
}

/* 过渡动画 */
.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(20px)
}

.list-enter-active,
.list-leave-active {
    transition: all 1s ease;
}
</style>